<template>
  <div style="padding: 10px">
    <div class="headerBoxList">
      <span style="margin-left: 10px">卸载的app</span>
    </div>
    <div class="contentBoxYY">
  <div v-if="!listData.length" class="empty-text">
    暂无数据
  </div>

  <div 
    v-else 
    class="app-card" 
    v-for="(item, index) in listData" 
    :key="index"
  >
    <div class="app-icon">
      📦
    </div>

    <div class="app-info">
      <div class="app-name">{{ item }}</div>
    </div>
  </div>
</div>



  </div>
</template>
  
<script>
import { getRxTmpPathApi } from '@/api/phoneInfo/index'
export default {
  name: "appDelTemp",
  props: ['sendData'],
  data() {
    return {
      activeName: 0,
      listData: []
    };
  },
  mounted() {
    this.initFunction();
  },
  watch: {
    '$store.state.account.basePhone': function () {
      this.initFunction();
    }
  },
  created() {

  },
  methods: {
    initFunction() {
      let node = this.sendData;
      let dataJson = {
        "proof_num": node.proof_num,
        "rxTmpPath": node.href
      }
      getRxTmpPathApi(dataJson).then(res => {
        if (typeof res.data === 'string') {
            // 格式化
            this.listData = res.data
            .split(',')
            .map(v => v.trim())
            .filter(v => v !== '');
        } else {
            this.listData = [];
        }
        });
    }
  },
};
</script>
  
<style scoped>

.headerBoxList {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #d2d2d2;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}

.contentBoxYY {
  width: 95%;
  margin: 0 auto;
  overflow: hidden;
  height: 87vh;
  overflow-y: auto;
  overflow-x: hidden;
  overflow-wrap: break-word
}
@media screen and (min-width: 2360px) {
  .contentBoxYY {
    width: 95%;
    margin: 0 auto;
    overflow: hidden;
    height: 83vh;
    overflow-y: auto;
    overflow-x: hidden;
    overflow-wrap: break-word
  }
}

@media screen and (min-width: 2561px) {
  .contentBoxYY {
    width: 95%;
    margin: 0 auto;
    overflow: hidden;
    height: 67vh;
    overflow-y: auto;
    overflow-x: hidden;
    overflow-wrap: break-word
  }
}
.contentBoxYY {
  width: 95%;
  margin: 0 auto;
  overflow: hidden;
  height: 87vh;
  overflow-y: auto;
  overflow-wrap: break-word;
  padding: 10px 0;
}

/* 空提示 */
.empty-text {
  text-align: center;
  padding-top: 40px;
  color: #999;
  font-size: 15px;
}

/* 卡片 */
.app-card {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 14px 18px;
  border-radius: 10px;
  margin-bottom: 12px;
  border: 1px solid #eaeaea;
  transition: all 0.22s ease;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(150, 150, 150, 0.05);
}

/* 悬浮 */
.app-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
  border-color: #dcdcdc;
}

/* 图标 */
.app-icon {
  font-size: 28px;
  margin-right: 14px;
}

/* 内容 */
.app-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.app-name {
  font-size: 15px;
  color: #333;
  font-weight: 500;
}

</style>